<template>
	<view class="dingdan">
		<view class="d2">
			<text>{{detail.first}}——</text>
			<text>{{detail.end}}</text>
		</view>
		<view class="d1">
			<text>姓名：</text>
			<input type="text" placeholder="请输入姓名" v-model="name"/>
		</view>
		<u-line></u-line>
		<view class="d1">
			<text>手机号：</text>
			<input type="text" placeholder="请输入手机号" v-model="phone"/>
		</view>
		<u-line></u-line>
		<view class="d1">
			<text>上车点：</text>
			<input type="text" placeholder="请输入上车点" v-model="start"/>
		</view>
		<u-line></u-line>
		<view class="d1">
			<text>下车点：</text>
			<input type="text" placeholder="请输入下车点" v-model="end"/>
		</view>
		<u-line></u-line>
		<u-button type="primary" text="提交订单" style="width: 100px; margin-top: 20px;" @click="tijiao"></u-button>
		<u-popup :show="key">
			<text style="font-size: 22px; text-align: center;">请选择支付方式</text>
			<view class="p1" style="margin-bottom: 30px;">
				<u-radio-group>
					<u-radio v-for="item in pay" :label="item.paymentType" :name="item.paymentType" label-size="20" style="margin-left: 20px; margin-top: 20px;" @change="ck"></u-radio>
				</u-radio-group>
			</view>
			<view class="p2" style="text-align: center; margin-bottom: 20px;">
				<text>{{price}}元</text>
			</view>
			<u-button type="error" text="支付" style="width: 100px;" @click="payment"></u-button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				name:'',
				phone:'',
				start:'',
				end:'',
				detail:{},
				price:'',
				path:'',
				status:0,
				ordernum:'',
				type:'',
				key:false,
				pay:[
					{
						paymentType:'微信支付',
						disable:false
					},
					{
						paymentType:'支付宝',
						disable:false
					},
					{
						paymentType:'电子支付',
						disable:false
					}
				]
			}
		},
		onLoad(options) {
			this.id=options.id
			this.getdetail()
		},
		methods: {
			getdetail(){
				this.api.get('/prod-api/api/bus/line/'+this.id).then(res=>{
					this.detail=res.data.data
					this.price=this.detail.price
					this.path=this.detail.name
				})
			},
			ck(e){
				this.type=e
			},
			payment(){
				if(this.type===''){
					uni.showToast({
						title:'请选择支付方式',
						icon:'error'
					})
				}else{
					const p={
						orderNum:this.ordernum,
						paymentType:this.type
					}
					this.api.get('/prod-api/api/bus/pay','POST',p).then(res=>{
						console.log(res.data)
						if(res.data.code===200){
							setTimeout(function(){
								uni.showToast({
									title:'支付成功'
								})
							},700)
							this.status=1
							
						}else{
							setTimeout(function(){
								uni.showToast({
									title:'支付失败',
									icon:'error'
								})
							},700)
						}
						this.key=false
					})
				}
			},
			tijiao(){
				if(this.name===''||this.phone===''||this.start===''||this.end===''){
					uni.showToast({
						title:'参数错误',
						icon:'error'
					})
				}else{
					const data={
						start:this.start,
						end:this.end,
						path:this.path,
						price:this.price,
						status:this.status
					}
					this.api.get('/prod-api/api/bus/order','POST',data).then(res=>{
						if(res.data.code===200){
							this.ordernum=res.data.orderNum
							this.key=true
						}else{
							setTimeout(function(){
								uni.showToast({
									title:'提交失败',
									icon:'error'
								})
							},700)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.d1{
	display: flex;
	margin-top: 20px;
	margin-bottom: 20px;
}
.d2{
	font-size: 26px;
	text-align: center;
}
</style>
